var gulp = require('gulp'),
    connect = require('gulp-connect'),
    webpack = require('gulp-webpack'),
    named = require('vinyl-named');

gulp.task('web-server', () => {
    connect.server({
        livereload: true,
        port: 3000
    });
})


gulp.task('index', () => {
    gulp.src('./index.html')
        .pipe(connect.reload());
})


gulp.task('webpack', () => {
    return gulp.src('./src/main.js')
        .pipe(named())
        .pipe(webpack({
            entry: { index: './src/main.js' },
            output: {
                filename: './[name].build.js'
            },
            module: {
                loaders: [{
                    test: /\.js$/,
                    loader: "babel",
                    exclude: /node_modules/
                }, {
                    test: /\.vue$/,
                    loader: "vue"
                }, {
                    test: /\.css$/,
                    loader: "style!css!less"
                }]
            },
            babel: {
                presets: ['es2015'],
                plugins: ['transform-runtime']
            },
            devtool: 'source-map'
        }))
        .pipe(gulp.dest('dist/'))
        .pipe(connect.reload());
})

/*gulp.task('vue-reload', () => {
	return gulp.src('./src/components/*.vue')
			.pipe(connect.reload());
})*/

gulp.task('watch', () => {
    gulp.watch('./index.html', ['index']);
    gulp.watch('./src/json/*.js', ['webpack']);
    gulp.watch('./src/js/*.js', ['webpack']);
    gulp.watch('./src/style/*.css', ['webpack']);
    gulp.watch('./src/components/*.vue', ['webpack']);
    gulp.watch('./src/*.vue', ['webpack']);
})

gulp.task('default', ['web-server', 'webpack', 'watch']);
